<template>
	<div id="news" class="container">
		<div class="list-group col-sm-3">
			<a class="list-group-item" :class='{active:index==isClick}' v-for="(item,index) in newsClassify" @click="goitem(item.router,index)">{{ index+1 }} - {{ item.name }}</a>
		</div>
		<transition name="fade" mode="out-in">
			<router-view class="list-group col-sm-8"></router-view>
		</transition>
	</div>
</template>

<script>
	export default {
		name: 'news',
		data(){
			return{
				newsClassify: [
					{
						name: '政治新闻',
						router: '/news/news1'
					},
					{
						name: '娱乐新闻',
						router: '/news/news2'
					},
					{
						name: '军事新闻',
						router: '/news/news3'
					}
				],
				isClick: 0
			}
		},
		methods: {
			goitem (router, index){
				this.isClick = index;
				this.$router.push({path: router, query: {id: "--我是你父亲--"}})
			}
		}
	}
</script>

<style scoped="scoped">
	#news{
		padding: 50px 0;
	}
	a{
		cursor: pointer;
	}
	a:hover,a:active{
		color: transparent;
	}
	.list-group{
		display: inline-block;
		vertical-align: top;
	}
	.list-group-item.active{
		color: #fff;
	}
	.fade-enter-active, .fade-leave-active {
		transition: opacity .5s;
	}
	.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
		opacity: 0;
	}
</style>